<template>
	<view>
		<view style="width:100%;height: 240px;background-color: red;">
			<view style="width: 100%;height: 40px;line-height: 40px;text-align: center;color: white;">
				{{currVideoUrl.channelName.zh_CN}}
			</view>
			<view style="width: 100%;height: 100%;" class="video-js" ref="videoBox">

			</view>
		</view>
		<view style="padding:20px;">
			<button @click="toNext()" style="margin-top: 10px;">下一个</button>
			<button @click="toLast()" style="margin-top: 5px;">上一个</button>
			<button @click="stopVideo()" style="margin-top: 5px;">停止播放</button>
			<button @click="startVideo()" style="margin-top: 5px;">开始播放</button>
			<button @click="disposeVideo()" style="margin-top: 5px;">销毁组件</button>
		</view>
		<view id="log" style="color:red;padding:10px;width: 100%;display:none">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoList: [],
				currVideoUrl: {
					channelName: {
						zh_CN: ""
					},
					channelUrl: ""
				},
				index: 0,
				video: null,
				source: null,
				playVideo: null
			}
		},
		onLoad() {
			this.initVideoPath();
		},
		onBackPress() {
			console.log("onBackPress")
			this.disposeVideo()
		},
		onUnload() {
			console.log("onUnload")
			this.disposeVideo()
		},
		onReady() {

			setTimeout(() => {
				// this.player.play()
				// this.player.fullscreen(true)
				console.dir(this.playVideo)
			}, 3000);
		},
		methods: {
			initVideoPath() {
				let url =
					"http://ngcdn001.cnr.cn/live/zgzs/index.m3u8"
				uni.request({
					url: url,
					method: "GET",
					success: (res) => {
						console.log(res)
						if (res.data && res.data.reasonCode == "0") {
							this.videoList = res.data.channelModelBo;
							if (this.videoList.length > 0) {
								this.currVideoUrl = this.videoList[0]
							}
							this.initVideo()
						}
					},
					complete: (res) => {
						document.getElementById("log").innerText = JSON.stringify(res)
					}
				})
			},
			toNext() {
				this.index++;
				if (this.index == this.videoList.length) {
					this.$api.msg("没有下一个了")
					this.index--;
					return;
				} else {
					this.currVideoUrl = this.videoList[this.index]
				}
				this.source.src = this.currVideoUrl.channelUrl;
				this.resetVideo(this.currVideoUrl.channelUrl);
			},
			toLast() {
				if (this.index == 0) {
					this.$api.msg("没有上一个了")
					return;
				} else {
					this.index--;
					this.currVideoUrl = this.videoList[this.index]
				}
				this.source.src = this.currVideoUrl.channelUrl;
				this.resetVideo(this.currVideoUrl.channelUrl);
			},
			initVideo() {
				this.video = document.createElement('video')
				this.video.id = 'video'
				this.video.style = "width:100%;height:100%"
				this.video.controls = true
				this.video.controls = true;
				this.video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
				this.video.setAttribute('webkit-playsinline',
					true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放，也就是不是全zhi屏播放的video标签的一个属性
				this.source = document.createElement('source')
				// this.source.src = this.currVideoUrl.channelUrl
				this.source.src = 'http://cctvalih5ca.v.myalicdn.com/live/cctv7_2/index.m3u8'
				
				this.video.appendChild(this.source)
				this.$nextTick(() => {
					this.$refs['videoBox'].$el.appendChild(this.video)
					this.playVideo = videojs('video', {
						// 视频配置
						
						autoplay: true
					}, (res) => {
						// this.playVideo.load()
						// 事件监听
					})
				})
				// document.addEventListener('DOMContentLoaded', this.videoInWeixinHandler());
				
				if (typeof WeixinJSBridge !== 'undefined') {
				    const video = document.getElementById("video")
				    WeixinJSBridge.invoke('getNetworkType',{},e => {
				      // 利用该方法进行自动播放
				      video.play()
				    });
				 }
				

			},
			// videoInWeixinHandler(){
			// 	document.addEventListener("WeixinJSBridgeReady", function() {
			// 		document.getElementById('video').play(); //视频自动播放
			// 	}, false);
			// 	// document.removeEventListener('DOMContentLoaded', this.videoInWeixinHandler());
			// },
			resetVideo(path) {
				this.playVideo.reset();
				this.playVideo.src([{
					type: "application/x-mpegURL",
					src: path
				}]);
				this.playVideo.load()
				this.playVideo.play()
			},
			stopVideo() {
				this.playVideo.pause()
			},
			startVideo() {
				this.playVideo.play()
			},
			disposeVideo() {

				this.$refs.videoBox.$el.removeChild(document.getElementById("video"));

				// //销毁组件
				// console.log(this.video)
				this.playVideo.dispose()
			}
		}
	}
</script>

<style scoped>
	video {
		width: 100%;
		height: 200px;
	}
</style>
